* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  background-color: #af6ec3;
}
.notes {
  display: flex;
}
.notes .sidebar {
  display: flex;
  flex-direction: column;
  margin-left: 1vw;
  width: 15vw;
}
.notes .sidebar .btn_add {
  margin-top: 1vw;
  padding: 1vw;
  width: 100%;
  background-color: #623c79;
  border: none;
  border-radius: 0.52083333vw;
  font-size: 1.04166667vw;
  color: #fff;
  cursor: pointer;
}
.notes .sidebar .list ul {
  margin-top: 2vw;
}
.notes .sidebar .list ul li {
  display: flex;
  flex-direction: column;
  margin-top: 1vw;
  background-color: #ebc7f8;
  border-radius: 0.36458333vw;
  cursor: pointer;
  color: #797979;
}
.notes .sidebar .list ul li .list_header {
  flex: 1;
  padding: 0.625vw;
  border-bottom: 0.10416667vw dashed #af6ec3;
  font-size: 0.9375vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.notes .sidebar .list ul li .list_body {
  padding: 0.41666667vw;
  font-size: 0.83333333vw;
}
.notes .sidebar .list ul li .list_updated {
  display: flex;
  padding: 0.46875vw;
  justify-content: flex-end;
  font-size: 0.625vw;
  color: #797979;
}
.notes .sidebar .list ul li.selected {
  border: 2px solid #ebc7f8;
  color: #fff;
  background-color: #331f49;
}
.notes .borderBottom {
  padding: 0.625vw;
  border-bottom: 0.10416667vw dashed #ebc7f8;
  font-size: 0.9375vw;
}
.notes .preview {
  display: flex;
  flex: 1;
  padding: 3vw 5vw 0 5vw;
  flex-direction: column;
}
.notes .preview .title {
  font-size: 2.5vw;
  font-weight: normal;
  background-color: #fef5ff;
  color: #797979;
  border: 0.26041667vw solid #623c79;
}
.notes .preview .body {
  margin-top: 3vw;
  padding: 0.83333333vw;
  height: 36.45833333vw;
  resize: none;
  font-size: 1.875vw;
  line-height: 1.5;
  border: 0.26041667vw solid #623c79;
  color: #797979;
}
